<template>
  <view class="user-wrapper">
    <view class="item info" style="
background: linear-gradient(-90deg, #FF5831 0%, #FF795A 100%);" v-if="$store.getters.token||userInfo.uid">
      <view class="avatar">
        <image :src="userInfo.avatar" style="width: 86rpx;
          height: 86rpx;
          border-radius: 50%;" />
      </view>
      <view class="setting-icon" @click="handleSetting">
        <image src="@/static/setting.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="item info" style="
    background: linear-gradient(-90deg, #FF5831 0%, #FF795A 100%);" v-else>
      <view class="avatar-flex">
        <view class="avatar-empty"></view>
        <button class="binding" @click="goAuthor" style="border: none;">
          <text class="login-text">注册/登陆</text>
        </button>
      </view>
      <view class="setting-icon" @click="handleSetting">
        <image src="@/static/setting.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="item order" style="background-image: url(https://h5.boxfuns.cn/static/images/userbg.png);" @click="goMyOrder()">
      <text>所有订单</text>
    </view>
    <view class="item more" style="background-image: url(https://h5.boxfuns.cn/static/images/morebg.png);">
      <text>更多精彩内容 敬请期待</text>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapMutations,
    mapActions
  } from "vuex";
  import {
    getUserInfo,
    getMenuUser,
    bindingPhone
  } from "@/api/user";
  import SwitchWindow from "@/components/SwitchWindow";
  import Authorization from "@/pages/authorization/index";

  const NAME = "User";
  export default {
    name: NAME,
    components: {
      SwitchWindow,
      Authorization
    },
    props: {},
    data: function() {
      return {
        MyMenus: [],
        switchActive: false,
        isWeixin: false
      };
    },
    computed: mapGetters(["userInfo"]),
    methods: {
      ...mapMutations(["updateAuthorizationPage", "changeTabBar"]),
      goReturnList() {
        this.$yrouter.push("/pages/order/ReturnList/index");
      },
      goMyOrder(type) {
        let that = this;
        if (this.$store.getters.token) {
          this.$yrouter.push({
            path: "/pages/order/MyOrder/index",
            query: {
              type
            }
          });
        } else {
          uni.showModal({
            content: '您还未授权登陆，请授权登陆后继续操作',
            showCancel: true,
            success(res) {
              if (res.confirm) {
                that.$yrouter.reLaunch({
                  path: "/pages/authorization/index",
                })
              } else if (res.cancel) {
                uni.showToast({
                  icon: 'none',
                  title: '取消授权'
                })
              }
            }
          })
        }

      },
      goBindPhone() {
        this.$yrouter.push({
          path: "/pages/user/BindingPhone/index",
        });
      },
      goUserCoupon() {
        this.$yrouter.push("/pages/user/coupon/UserCoupon/index");
      },
      goIntegral() {
        this.$yrouter.push("/pages/user/signIn/Integral/index");
      },
      goUserPromotion() {
        this.$yrouter.push("/pages/user/promotion/UserPromotion/index");
      },
      goAuthor() {
        this.$yrouter.reLaunch({
          path: "/pages/authorization/index",
        })
      },
      handleSetting() {
        let that = this;
        if (!this.$store.getters.token) {
          uni.showModal({
            content: '您还未授权登陆，请授权登陆后继续操作',
            showCancel: true,
            success(res) {
              if (res.confirm) {
                that.$yrouter.reLaunch({
                  path: "/pages/authorization/index",
                })
              } else if (res.cancel) {
                uni.showToast({
                  icon: 'none',
                  title: '取消授权'
                })
              }
            }
          })
        } else {
          this.$yrouter.push("/pages/user/InfoV2/index");
        }
      },
      goUserAccount() {
        this.$yrouter.push({
          path: "/pages/user/UserAccount/index"
        });
      },
      goPersonalData() {
        this.$yrouter.push("/pages/user/PersonalData/index");
      },
      getPhoneNumber: function(e) {
        let thit = this;
        // 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
        if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
          uni.showLoading({
            title: "绑定中"
          });
          bindingPhone({
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv
            })
            .then(res => {
              // this.User();
              thit.$store.dispatch("userInfo", true);
              uni.hideLoading();
              uni.showToast({
                title: res.msg,
                icon: "success",
                duration: 2000
              });
            })
            .catch(error => {
              uni.hideLoading();
              thit.$store.dispatch("userInfo", true);
              console.log(error);
              uni.showToast({
                title: error.msg ||
                  error.response.data.msg ||
                  error.response.data.message,
                icon: "none",
                duration: 2000
              });
            });
        } else {
          uni.showToast({
            title: "已拒绝授权",
            icon: "none",
            duration: 2000
          });
        }
      },
      changeswitch: function(data) {
        this.switchActive = data;
      },
      MenuUser: function() {
        let that = this;
        getMenuUser()
          .then(res => {
            uni.hideLoading();
            that.MyMenus = res.data.routine_my_menus;
          })
          .catch(error => {
            uni.hideLoading();
            console.log(error);
          });
      },
      goPages: function(index) {
        let url = this.MyMenus[index].uniapp_url;
        if (
          url === "/pages/user/promotion/UserPromotion/index" &&
          this.userInfo.statu === 1
        ) {
          if (!this.userInfo.isPromoter) {
            uni.showToast({
              title: "您还没有推广权限！！",
              icon: "none",
              duration: 2000
            });
            return;
          }
        }

        if (
          url === "/pages/orderAdmin/OrderIndex/index" &&
          !this.userInfo.adminid
        ) {
          uni.showToast({
            title: "您还不是管理员！！",
            icon: "none",
            duration: 2000
          });
          return;
        }
        console.log(this.userInfo)
        if (url === "/pages/orderAdmin/OrderCancellation/index" && !this.userInfo.checkStatus) {
          uni.showToast({
            title: "您没有核销权限,请后台店员设置！！",
            icon: "none",
            duration: 2000
          });
          return;
        }

        this.$yrouter.push({
          path: this.MyMenus[index].uniapp_url
        });
      },
      goPages2: function() {
        this.$yrouter.push({
          path: "/pages/orderAdmin/OrderCancellation/index"
        });
      }
    },
    watch: {
      userInfo() {
        this.MenuUser();
      }
    },
    onShow() {
      this.changeTabBar({
        index: 2
      })
      if (this.$store.getters.token) {
        //
        uni.showLoading({
          title: "加载中"
        });
        this.$store.dispatch("getUser", true);
      }
    },
    onHide() {
      console.log("离开用户中心");
    }
  };
</script>

<style lang="less">
  .user-wrapper {
    padding: 30rpx;

    .item {
      display: flex;
      align-items: center;
      height: 160rpx;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      background-size: cover;
      padding: 30rpx;
      color: #fff;

      .avatar-flex {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .binding {
        background-color: transparent;
      }

      &.info {
        justify-content: space-between;

        .avatar {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
          border: 1px solid #fff;
        }

        .login-text {
          font-size: 16px;
          color: #FFFFFF;
          margin-left: 10px;
        }

        .avatar-empty {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
          background-image: url();
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
        }

        .setting-icon {
          width: 48rpx;
          height: 48rpx;
          background-position: center center;
          background-repeat: no-repeat;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      &.order {
        justify-content: flex-end;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      &.more {
        justify-content: center;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
</style>
